import { ReactElement } from 'react';
import { CloseOutline } from 'antd-mobile-icons';
import './Tag.less';

type Iprops = {
  showValue: string[];
  remove: Function;
  ccMember?: '';
  defaultSelected?: any[];
};

function Tag(props: Iprops): ReactElement {
  const { showValue, remove, ccMember, defaultSelected } = props;
  return (
    <div className="EformTags">
      {defaultSelected?.map((item: any, index: number) => {
        return (
          <div className="tag-item" key={index}>
            <div style={{ fontSize: 14 }}>{item.name}</div>
          </div>
        );
      })}
      {showValue.map((item: any, index: number) => {
        return (
          <div className="tag-item" key={index}>
            <div style={{ fontSize: 14 }}>{item.name}</div>
            {!ccMember && (
              <div
                style={{ width: '20px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}
              >
                <CloseOutline
                  fontSize={14}
                  className="tag-item-icons"
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    remove(item);
                  }}
                />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
export default Tag;
